<script setup>
defineProps({
  chunks: {
    type: Array,
    required: true,
  },
})

const emit = defineEmits(['confirm'])
</script>

<template>
  <div class="preview-container">
    <h3>文档分段预览（共{{ chunks.length }}段）</h3>

    <div v-for="(chunk, index) in chunks" :key="chunk.chunkId" class="chunk-item">
      <div class="chunk-header">
        <span>段落 {{ index + 1 }}</span>
        <span class="keywords" v-if="chunk.keywords?.length">
          关键词：{{ chunk.keywords.join(', ') }}
        </span>
      </div>
      <pre class="chunk-content">{{ chunk.content }}</pre>
    </div>

    <button @click="emit('confirm')" class="confirm-btn">✅ 确认上传</button>
  </div>
</template>

<style scoped>
.preview-container {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.chunk-item {
  margin: 1.5rem 0;
  border: 1px solid #e9ecef;
  border-radius: 6px;
}

.chunk-header {
  padding: 0.8rem 1rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.keywords {
  color: #4dabf7;
  font-size: 0.9em;
}

.chunk-content {
  padding: 1rem;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  background: #f8f9fa;
  margin: 0;
  font-family: 'Courier New', monospace;
}

.confirm-btn {
  display: block;
  width: 100%;
  padding: 1rem;
  background: #4dabf7;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.1em;
}

.confirm-btn:hover {
  background: #228be6;
  transform: translateY(-1px);
}
</style>
